<script setup>
import { ref } from 'vue';
import { listOrder } from '../api/index';
import { reactive } from 'vue';


const state = reactive({
  orderList: []
});
const loading = ref(false);
const finished = ref(false);
const curPage = ref(1);

const getOrderList = async (pageNum, pageSize) => {
  try {
    const response = await listOrder({
      pageNum: pageNum,
      pageSize: pageSize
    });

    for (let i = 0; i < response.data.records.length; i++) {
      state.orderList.push(response.data.records[i]);
    }

    if (state.orderList.length >= response.data.total) {
      finished.value = true;
    }
    console.log(response.data);
    console.log(state.orderList.length);
  } catch (error) {
    console.error('获取订单数据时出错:', error);
  }
};

const getReachDate = (orderDate) => {

  const time = new Date(orderDate);
  time.setMinutes(time.getMinutes() + 75);
  return formatDateTime(time);
}

const getOrderDate = (orderDate) => {

  const time = new Date(orderDate);
  return formatDateTime(time);
}

const getNumber = (number) => {
  let formattedNumber = number.toFixed(2);
  return formattedNumber;
}

function formatDateTime(date) {
  const year = date.getFullYear().toString().padStart(2, '0'); // 取最后两位年份
  const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的
  const day = date.getDate().toString().padStart(2, '0');
  const hours = date.getHours().toString().padStart(2, '0');
  const minutes = date.getMinutes().toString().padStart(2, '0');
  const seconds = date.getSeconds().toString().padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

getOrderList(1, 5);

const onLoad = () => {
  loading.value = true;
  curPage.value += 1;
  getOrderList(curPage.value, 5);
  setTimeout(() => {
    loading.value = false;
  }, 1000);

};

</script>

<template>
  <div>
    <van-list v-model:loading="loading" :finished="finished" :immediate-check="false" finished-text="没有更多了"
      @load="onLoad" :offset="300">
      <div style="padding-bottom: 5px;" class="main">

        <div class="order-detail" v-for="value in state.orderList" :key="value">
          <div style="display: flex; justify-content: space-between;">
            <div class="order-bussiness"
              style="display: flex; align-items: center; padding-left: 20px;padding-top: 20px;">
              <van-image style="width: 40px; height: 40px; margin-right: 10px;" :src="value.business.businessImg" />
              <label class="business-name">{{ value.business.businessName }}</label>
            </div>
            <van-icon style="padding-top: 25px;padding-right: 20px;" color="#1989fa" size="30px" name="shopping-cart" />

          </div>
          <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"></van-divider>
          <div class="order-progress"
            style="margin-top: 10px;margin-bottom: 20px; width: auto;height: auto; text-align: center;">
            <van-steps direction="vertical" :active="value.orderState">
              <van-step v-show="value.orderState >= 0" style="height: 40px;" class="step">
                <h3>【{{value.deliveryAddress.contactName}}】未支付</h3>
                <p>{{ getOrderDate(value.orderDate) }}</p>
              </van-step>
              <van-step v-show="value.orderState >= 1" style="height: 40px;" class="step">
                <h3>【{{value.deliveryAddress.contactName}}】已支付</h3>
                <p>{{ getOrderDate(value.orderDate) }}</p>
              </van-step>
              <van-step v-show="false" style="height: 40px;" class="step">
                <h3>【{{value.deliveryAddress.contactName}}】已完成</h3>
                <p>{{ getReachDate(value.orderDate) }}</p>
              </van-step>
              <van-step v-show="value.orderState >= 3" style="height: 40px;" class="step">
                <h3>【{{value.deliveryAddress.contactName}}】已完成</h3>
                <p>{{ getReachDate(value.orderDate) }}</p>
              </van-step>
            </van-steps>

          </div>
          <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">菜品</van-divider>
          <div class="order-dishes" style="margin-bottom: 10px;">
            <span v-for="index in value.orderDetailDtoList" :key="index" class="dish"
              style="display: block;font-size: 20px;margin-bottom: 5px;">
              <p class="food">
                <span>{{ index.food.foodName }}x{{ index.quantity }}</span>
                <span>￥{{ getNumber(index.food.foodPrice) }}</span>
              </p>
            </span>
            <span class="dish"
              style="display: block;font-size: 10px;margin-bottom: 5px;">
              <p class="food" style="font-size: 18px;">
                <span>配送费</span>
                <span>￥{{ getNumber(value.deliveryCharge) }}</span>
              </p>
            </span>
          </div>
          <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">订单详情</van-divider>
          <div style="font-size: 20px;">
            <p class="order-info">
              <span>订单编号:</span>
              <span>{{ value.orderId }}</span>
            </p>
            <p class="order-info">
              <span>预计送达时间:</span>
              <span>{{ getReachDate(value.orderDate) }}</span>
            </p>
            <p class="order-info">
              <span>送达地址:</span>
              <span>{{ value.deliveryAddress.address }}</span>
            </p>
            <p class="order-info">
              <span>下单时间:</span>
              <span>{{ getOrderDate(value.orderDate) }}</span>
            </p>
            <p class="order-info">
              <span>订单金额:</span>
              <span>￥{{ getNumber(value.orderTotal) }}</span>
            </p>
          </div>
          
        </div>

      </div>

      <van-tabbar route>
        <van-tabbar-item replace to="/" icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item replace to="/order" icon="shopping-cart-o">订单</van-tabbar-item>
        <van-tabbar-item replace to="/user" icon="user-o">我的</van-tabbar-item>
      </van-tabbar>
    </van-list>
  </div>
  <van-back-top right="10vw" bottom="10vh"/>
</template>

<style lang="scss" scoped>

.business-name {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 24px;
  color: #333;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  line-height: 1.2;
  letter-spacing: 1px;
}

.order-detail {
  margin-top: 20px;
  margin: 10px;
  border-width: 2px;
  background-color: #fefefe;
  border-radius: 10px;
  padding-bottom: 25px;
  overflow-y: auto;

  background-color: white;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  /* 修改了模糊半径和alpha值 */
  overflow: hidden;
}

.step {
  height: 100px;
  width: auto;
}

.main {
  // background-color: red;
  padding-bottom: 50px;
  overflow-y: auto;
}

.food {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  padding: auto;
  margin: 20px;
  color: #1989fa;
}

.order-info {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  padding: auto;
  margin: 20px;
  color: #1989fa;
}
</style>
